@use "./ctr-variables.scss" as *;

.svc-creator-popup,
.svc-creator {
  --sjs-layer-1-background-500: var(--sjs2-color-bg-basic-primary);
  --sjs-layer-1-background-400: var(--sjs2-color-bg-basic-primary-dim);
  --sjs-layer-1-foreground-100: var(--sjs2-color-fg-basic-primary);
  --sjs-layer-1-foreground-50: var(--sjs2-color-fg-basic-secondary);
  --sjs-layer-3-background-500: var(--sjs2-color-bg-basic-secondary);
  --sjs-layer-3-background-400: var(--sjs2-color-bg-basic-secondary-dim);
  --sjs-layer-3-foreground-100: var(--sjs2-color-fg-basic-primary);
  --sjs-layer-3-foreground-50: var(--sjs2-color-fg-basic-secondary);
  --sjs-layer-2-background-500: var(--sjs2-color-control-formbox-design-bg);
  --sjs-layer-2-background-400: var(--sjs2-color-bg-basic-secondary-dim-for-tests-only, var(--sjs2-color-bg-basic-secondary-dim));
  --sjs-special-haze: var(--sjs2-color-utility-overlay-screen);
  --sjs-border-25: var(--sjs2-color-border-basic-secondary-for-tests-only, var(--sjs2-color-border-basic-secondary));
  --sjs-border-10: var(--sjs2-color-border-basic-secondary);
  --sjs-primary-background-500: var(--sjs2-color-bg-brand-primary);
  --sjs-primary-background-10: var(--sjs2-color-bg-brand-secondary);
  --sjs-primary-background-400: var(--sjs2-color-bg-brand-primary-dim);
  --sjs-primary-foreground-100: var(--sjs2-color-fg-static-main-primary);
  --sjs-primary-foreground-25: var(--sjs2-color-fg-static-main-primary);
  --sjs-secondary-background-500: var(--sjs2-color-bg-accent-primary);
  --sjs-secondary-background-25: var(--sjs2-color-bg-accent-secondary-dim);
  --sjs-secondary-background-10: var(--sjs2-color-bg-accent-secondary);
  --sjs-secondary-foreground-100: #ffffffff; //used in license banner
  --sjs-secondary-forecolor-25: #ffffff40; //never used
  --sjs-semantic-red-background-500: var(--sjs2-color-bg-alert-primary);
  --sjs-semantic-red-background-10: var(--sjs2-color-bg-alert-secondary);
  --sjs-semantic-red-foreground-100: var(--sjs2-color-fg-static-main-primary);
  --sjs-semantic-green-background-500: #19b394ff;
  --sjs-semantic-green-background-10: #19b3941a;
  --sjs-semantic-green-foreground-100: #ffffffff;
  --sjs-semantic-blue-background-500: var(--sjs2-color-bg-note-primary);
  --sjs-semantic-blue-background-10: var(--sjs2-color-bg-note-secondary);
  --sjs-semantic-blue-foreground-100: var(--sjs2-color-fg-static-main-primary);
  --sjs-semantic-yellow-background-500: var(--sjs2-color-bg-warning-primary);
  --sjs-semantic-yellow-background-10: var(--sjs2-color-bg-warning-secondary);
  --sjs-semantic-yellow-foreground-100: var(--sjs2-color-fg-static-main-primary);
  --sjs-semantic-white-background-500: #ffffffff;
  --sjs-code-gray-700: #b6b6b6ff;
  --sjs-code-blue-500: #326fcaff;
  --sjs-code-gray-300: #505050ff;
  --sjs-code-green-500: #08997cff;
  --sjs-code-red-500: #f41b50ff;
  --sjs-code-purple-500: #c22fa2ff;
  --sjs-code-yellow-500: #f58d06ff;
  --sjs-code-gray-500: #8a8a8aff;
  --sjs-special-background: var(--sjs2-color-utility-surface); //!
  --sjs-layer-1-foreground-75: var(--sjs2-color-fg-basic-primary-muted);
  --sjs-special-glow: var(--sjs2-color-utility-shadow-medium); //!
  --sjs-special-shadow: var(--sjs2-color-utility-shadow-surface-default);
  --sjs-layer-3-foreground-75: var(--sjs2-color-fg-basic-primary-muted);
  --sjs-layer-2-foreground-100: var(--sjs2-color-fg-basic-primary);
  --sjs-layer-2-foreground-75: var(--sjs2-color-fg-basic-primary-muted);
  --sjs-layer-2-foreground-50: var(--sjs2-color-fg-basic-secondary);
  --sjs-border-25-overlay: var(--sjs2-color-utility-scrollbar);
  --sjs-secondary-background-400: var(--sjs2-color-bg-brand-primary);
}
